<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type="text/javascript" src="../js/vue.js"></script>
  <title>列表渲染</title>
</head>
<body>
  <div id="root">
    <h2>列表排序</h2>
    <hr>
    <input type="text" v-model="inputKey" placeholder="检索姓名">
    <button @click="sortType = 1">年龄升序</button>
    <button @click="sortType = 2">年龄降序</button>
    <button @click="sortType = 0">原顺序</button>
    {{sortType}}
    <div>
      <ul v-for="p of filePersion" :key="p.id">
        <li>{{p.name}} ，年龄：{{p.age}}</li>
      </ul>
    </div>
  </div>
  <script type="text/javascript">
     new Vue({
      el: '#root', 
      data: { 
        sortType: 0, //0 原顺序 ，1 升序，2 降序
        inputKey: '',
        persion: [
          {id:'sk9G2O01avD',name:'张三',age:'12'},
          {id:'k8F4Dl7m',name:'李四',age:'34'},
          {id:'1Ff3lm0G',name:'李六',age:'54'},
          {id:'sf3Pd94pf7za',name:'张九',age:'32'},
          {id:'oB5vA0Qmm1p',name:'杰克',age:'22'}
        ],
      },
      computed: {
        filePersion() {
          const arr =  this.persion.filter((p)=>{
            return p.name.indexOf(this.inputKey) >= 0
          })
          // 判断是否需要排序
          if (this.sortType) {
            arr.sort((p1,p2)=>{
              return this.sortType === 1 ?  p1.age-p2.age : p2.age-p1.age
            })
          }
          return arr
        }
      }
    })
  </script>
</body>
</html>